<template>
  <div>
    <h1 v-color="color">指令的值1测试</h1>
    <h1>指令的值2测试</h1>
  </div>
</template>

<script>
export default {
  directives: {
    color: {
      // 元素被插入到页面中时触发（一次）
      inserted(el, binding) {
        // el.style.color = 指令值
        // console.log(binding.value, '指令值 - inserted');
        el.style.color = binding.value
      },
      // 在指令值发生变化时触发（多次）
      update(el, binding) {
        // console.log(binding.value, '指令值 - update');
        el.style.color = binding.value
      }
    }
  },
  data () {
    return {
      color: 'red'
    }
  }
}
</script>

<style>

</style>